<template>
  <div id="app">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top" :class="{ 'scrolled': isScrolled }" ref="navbar">
      <!-- Dynamic Background -->
      <div class="navbar-bg"></div>
      <div class="navbar-particles"></div>
      
      <div class="container">
        <router-link class="navbar-brand" to="/" @click="playClickSound">
          <div class="brand-container">
            <div class="brand-icon">
              <i class="fas fa-music"></i>
              <div class="brand-pulse"></div>
            </div>
            <span class="brand-text">
              <span class="brand-main">Music</span>
              <span class="brand-sub">Vibe</span>
            </span>
          </div>
        </router-link>
        
        <button 
          class="navbar-toggler" 
          type="button" 
          data-bs-toggle="collapse" 
          data-bs-target="#navbarNav"
          :class="{ 'active': isMenuOpen }"
          @click="toggleMenu"
        >
          <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item" v-for="(item, index) in navItems" :key="item.path">
              <router-link 
                class="nav-link" 
                :to="item.path" 
                :exact-active-class="item.path === '/' ? 'active' : ''"
                :active-class="item.path !== '/' ? 'active' : ''"
                @click="playClickSound"
                :style="{ animationDelay: index * 0.1 + 's' }"
              >
                <div class="nav-link-content">
                  <i :class="item.icon" class="nav-icon"></i>
                  <span class="nav-text">{{ item.name }}</span>
                  <div class="nav-indicator"></div>
                </div>
              </router-link>
            </li>
          </ul>
          
          <!-- User Menu -->
          <div class="user-menu" v-if="currentUser">
            <div class="user-info" @click="toggleUserDropdown">
              <div class="user-avatar">
                <i class="fas fa-user"></i>
              </div>
              <span class="user-name">{{ currentUser.username }}</span>
              <i class="fas fa-chevron-down dropdown-icon" :class="{ 'rotated': showUserDropdown }"></i>
            </div>
            
            <!-- User Dropdown -->
            <div class="user-dropdown" :class="{ 'show': showUserDropdown }">
              <div class="dropdown-item">
                <i class="fas fa-user me-2"></i>
                个人资料
              </div>
              <div class="dropdown-item">
                <i class="fas fa-cog me-2"></i>
                设置
              </div>
              <div class="dropdown-divider"></div>
              <div class="dropdown-item logout" @click="logout">
                <i class="fas fa-sign-out-alt me-2"></i>
                退出登录
              </div>
            </div>
          </div>
          
          <!-- Login Button -->
          <router-link v-else to="/auth" class="login-btn">
            <i class="fas fa-sign-in-alt me-2"></i>
            登录
          </router-link>
          
          <!-- Search Button -->
          <button class="search-btn" @click="toggleSearch">
            <i class="fas fa-search"></i>
          </button>
          
          <!-- Theme Toggle -->
          <button class="theme-toggle" @click="toggleTheme">
            <i class="fas fa-moon"></i>
          </button>
        </div>
      </div>
      
      <!-- Search Overlay -->
      <div class="search-overlay" :class="{ 'active': isSearchOpen }">
        <div class="search-container">
          <input 
            type="text" 
            placeholder="搜索音乐、艺术家、专辑..."
            class="search-input"
            ref="searchInput"
          >
          <button class="search-close" @click="closeSearch">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
      <router-view />
    </main>

    <!-- Music Player -->
    <MusicPlayer />

    <!-- Footer -->
    <footer class="bg-dark text-light py-5 mt-5">
      <div class="container">
        <div class="row">
          <div class="col-md-4 mb-4">
            <h5>MusicVibe</h5>
            <p>探索音乐的无限可能，感受艺术的魅力。</p>
            <div class="social-links">
              <a href="#" class="text-light me-3"><i class="fab fa-facebook-f"></i></a>
              <a href="#" class="text-light me-3"><i class="fab fa-twitter"></i></a>
              <a href="#" class="text-light me-3"><i class="fab fa-instagram"></i></a>
              <a href="#" class="text-light me-3"><i class="fab fa-youtube"></i></a>
            </div>
          </div>
          <div class="col-md-4 mb-4">
            <h6>快速链接</h6>
            <ul class="list-unstyled">
              <li><router-link to="/" class="text-light text-decoration-none">首页</router-link></li>
              <li><router-link to="/albums" class="text-light text-decoration-none">专辑</router-link></li>
              <li><router-link to="/artists" class="text-light text-decoration-none">艺术家</router-link></li>
              <li><router-link to="/shows" class="text-light text-decoration-none">演出</router-link></li>
            </ul>
          </div>
          <div class="col-md-4 mb-4">
            <h6>联系我们</h6>
            <p><i class="fas fa-envelope me-2"></i>495102566@qq.com</p>
            <p><i class="fas fa-phone me-2"></i>+86 123-456-7890</p>
          </div>
        </div>
        <hr class="my-4">
        <div class="text-center">
          <p>&copy; 2025 MusicVibe. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import MusicPlayer from './components/MusicPlayer.vue'

export default {
  name: 'App',
  components: {
    MusicPlayer
  },
  data() {
    return {
      isScrolled: false,
      isMenuOpen: false,
      isSearchOpen: false,
      showUserDropdown: false,
      currentUser: null,
      navItems: [
        { path: '/', name: '首页', icon: 'fas fa-home' },
        { path: '/albums', name: '专辑', icon: 'fas fa-compact-disc' },
        { path: '/artists', name: '艺术家', icon: 'fas fa-microphone' },
        { path: '/shows', name: '演出', icon: 'fas fa-calendar-alt' },
        { path: '/gallery', name: '画廊', icon: 'fas fa-images' },
        { path: '/about', name: '关于', icon: 'fas fa-info-circle' }
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.initParticles()
    this.checkUserStatus()
    // 监听用户状态变化
    window.addEventListener('storage', this.handleStorageChange)
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
    window.removeEventListener('storage', this.handleStorageChange)
  },
  methods: {
    handleScroll() {
      this.isScrolled = window.scrollY > 50
    },
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    },
    toggleSearch() {
      this.isSearchOpen = true
      this.$nextTick(() => {
        if (this.$refs.searchInput) {
          this.$refs.searchInput.focus()
        }
      })
    },
    closeSearch() {
      this.isSearchOpen = false
    },
    toggleTheme() {
      // Theme toggle functionality
      console.log('Theme toggled')
    },
    playClickSound() {
      // Optional: Add click sound effect
    },
    initParticles() {
      const particlesContainer = document.querySelector('.navbar-particles')
      if (!particlesContainer) return

      // Create floating particles
      for (let i = 0; i < 20; i++) {
        const particle = document.createElement('div')
        particle.className = 'particle'
        particle.style.left = Math.random() * 100 + '%'
        particle.style.animationDelay = Math.random() * 20 + 's'
        particle.style.animationDuration = (Math.random() * 10 + 10) + 's'
        particlesContainer.appendChild(particle)
      }
    },
    checkUserStatus() {
      const user = localStorage.getItem('currentUser')
      if (user) {
        this.currentUser = JSON.parse(user)
      }
    },
    handleStorageChange(e) {
      if (e.key === 'currentUser') {
        if (e.newValue) {
          this.currentUser = JSON.parse(e.newValue)
        } else {
          this.currentUser = null
        }
      }
    },
    toggleUserDropdown() {
      this.showUserDropdown = !this.showUserDropdown
    },
    logout() {
      localStorage.removeItem('currentUser')
      this.currentUser = null
      this.showUserDropdown = false
      this.$router.push('/')
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0a0a0a;
  color: #ffffff;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding-top: 76px; /* Account for fixed navbar */
  padding-bottom: 80px; /* Account for music player */
}

/* Advanced Navbar Styles */
.navbar {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1000;
  padding: 0.75rem 0;
}

.navbar.scrolled {
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg, 
    rgba(255, 107, 107, 0.1) 0%, 
    rgba(78, 205, 196, 0.1) 50%,
    rgba(116, 75, 162, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.navbar:hover .navbar-bg {
  opacity: 1;
}

.navbar-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, rgba(78, 205, 196, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  animation: float-particle 15s infinite linear;
}

@keyframes float-particle {
  0% {
    transform: translateY(100px) translateX(-10px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(10px);
    opacity: 0;
  }
}

/* Brand Styles */
.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
  padding: 0;
  margin-right: 2rem;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
}

.navbar-brand:hover .brand-container {
  transform: scale(1.05);
}

.brand-icon {
  position: relative;
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.brand-icon:hover {
  border-radius: 50%;
  transform: rotate(360deg);
}

.brand-pulse {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid rgba(78, 205, 196, 0.5);
  border-radius: 15px;
  animation: pulse-ring 2s cubic-bezier(0.25, 0, 0, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  80%, 100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-main {
  font-size: 1.4rem;
  font-weight: 800;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-sub {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Navigation Links */
.navbar-nav {
  align-items: center;
  gap: 0.5rem;
}

.nav-item {
  position: relative;
}

.nav-link {
  position: relative;
  font-weight: 500;
  padding: 0.75rem 1.25rem !important;
  border-radius: 25px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
  overflow: hidden;
}

.nav-link-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
}

.nav-icon {
  font-size: 1rem;
  transition: all 0.3s ease;
}

.nav-text {
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-link:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.nav-link:hover .nav-icon {
  transform: scale(1.1) rotate(5deg);
  color: #4ecdc4;
}

.nav-link:hover .nav-indicator {
  width: 100%;
}

.nav-link.active {
  color: white !important;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(78, 205, 196, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link.active .nav-icon {
  color: #ff6b6b;
  transform: scale(1.1);
}

.nav-link.active .nav-indicator {
  width: 100%;
}

/* User Menu */
.user-menu {
  position: relative;
  margin-left: 1rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.user-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.user-name {
  color: white;
  font-weight: 500;
  font-size: 0.9rem;
}

.dropdown-icon {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.dropdown-icon.rotated {
  transform: rotate(180deg);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  margin-top: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.user-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  padding: 0.75rem 1rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.dropdown-item.logout {
  color: #ff6b6b;
}

.dropdown-item.logout:hover {
  background: rgba(255, 107, 107, 0.2);
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0.5rem 0;
}

.login-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  color: white !important;
  text-decoration: none;
  border-radius: 25px;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  margin-left: 1rem;
  display: flex;
  align-items: center;
  border: none;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Action Buttons */
.search-btn,
.theme-toggle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.search-btn:hover,
.theme-toggle:hover {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  color: white;
  transform: scale(1.1);
}

.search-btn:active,
.theme-toggle:active {
  transform: scale(0.95);
}

/* Hamburger Menu */
.navbar-toggler {
  border: none;
  padding: 0.5rem;
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hamburger {
  width: 20px;
  height: 15px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.3s ease-in-out;
}

.hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
  top: 0px;
}

.hamburger span:nth-child(2) {
  top: 6px;
}

.hamburger span:nth-child(3) {
  top: 12px;
}

.navbar-toggler.active .hamburger span:nth-child(1) {
  top: 6px;
  transform: rotate(135deg);
}

.navbar-toggler.active .hamburger span:nth-child(2) {
  opacity: 0;
  left: -30px;
}

.navbar-toggler.active .hamburger span:nth-child(3) {
  top: 6px;
  transform: rotate(-135deg);
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 9999;
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-container {
  position: relative;
  width: 90%;
  max-width: 600px;
}

.search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 1.5rem 2rem;
  font-size: 1.2rem;
  color: white;
  outline: none;
  transition: all 0.3s ease;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-input:focus {
  border-color: #4ecdc4;
  background: rgba(255, 255, 255, 0.15);
}

.search-close {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.search-close:hover {
  color: #ff6b6b;
}

/* Mobile Responsive */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 15px;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .navbar-nav {
    gap: 0.25rem;
  }
  
  .nav-link {
    padding: 1rem !important;
    margin: 0.25rem 0;
  }
  
  .user-menu {
    margin: 1rem 0 0.5rem 0;
    width: 100%;
  }
  
  .user-info {
    width: 100%;
    justify-content: center;
  }
  
  .user-dropdown {
    position: static;
    width: 100%;
    margin-top: 0.5rem;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  
  .user-dropdown.show {
    display: block;
  }
  
  .login-btn {
    margin: 1rem 0 0.5rem 0;
    width: 100%;
    justify-content: center;
  }
  
  .search-btn,
  .theme-toggle {
    margin: 0.5rem 0.25rem 0 0.25rem;
  }
  
  .brand-text {
    display: none;
  }
}

/* Enter Animation */
@keyframes navItemEnter {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-item {
  animation: navItemEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #4ecdc4;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #45b7b8;
}

/* Social links */
.social-links a {
  transition: all 0.3s ease;
}

.social-links a:hover {
  color: #4ecdc4 !important;
  transform: translateY(-2px);
}

/* Custom gradient backgrounds */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-bg-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-bg-3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* Button hover effects */
.btn {
  transition: all 0.3s ease;
  border-radius: 25px;
  font-weight: 500;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
